<template>
  <view class="content">
    <view class="back" :style="{top: statusBarHeight + 'px'}" @click="backClick()"></view>
    <view class="top" @click="topClick()" :style="{top: 0 + 'px'}">
      <view class="top_cont_top1" :style="{top: statusBarHeight + 'px'}">
        <view class="left">
          第{{record.record_number || '???'}}期
        </view>
        <view class="right">
          <text v-if="record.is_next == 1">开始下一局</text>
          <text v-if="record.is_next != 1">距离开奖时间</text>
        </view>
      </view>
      <view class="top_cont_top2" :style="{top: statusBarHeight+20 + 'px'}">
        <view class="left">
          {{record.bet_man || 0}}人下注
        </view>
        <view class="right" v-if="record">
          <u-count-down v-if="record.is_next == 1" @finish="timeup1" :time="countdown1" format="HH:mm:ss"
            :show-border="true" font-size="28" color="#FFD76B" border-color="#909399" bg-color="#000000"></u-count-down>
          <u-count-down v-if="record.is_next != 1 && kaijiang" @finish="timeup2" :time="countdown2" format="HH:mm:ss"
            :show-border="true" font-size="28" color="#FFD76B" border-color="#909399" bg-color="#000000"></u-count-down>
          <view class="" v-if="record.is_next != 1 && kaijiang == false">
            开奖中...
          </view>
        </view>
      </view>
    </view>
    <view class="set" :style="{top: statusBarHeight + 'px'}" @click="setClick()"></view>
    <view class="play" @click="playClick()">玩法说明</view>
    <view class="history" @click="historyClick()">历史记录</view>
    <view class="table">
      <!-- 开奖之后的色子 start -->
      <view class="table_sezi u-flex u-ju-around game-dice-dian ">
        <view v-for="(item,index) in imageList" :key="index" :class="'show'+index+' '+'dice'+item">

        </view>
      </view>
      <!-- 开奖之后的色子 end -->
      <view class="table_content">
        <view class="table_top">
          <view class="table_top_one">
            <view :class="selectTypeList.indexOf(1) !=-1 ? 'dot_con_ones':'dot_con_one'" @click="selectTypeClick(1)">
            </view>
            <u-transition :show="showTotalOne">
              <view class="transition_total">+{{addValue0}}</view>
            </u-transition>
            <view class="dot_con_value">总{{record.item2_total}}</view>
          </view>
          <view class="table_top_one">
            <view :class="selectTypeList.indexOf(2) !=-1 ? 'dot_con_twos':'dot_con_two'" @click="selectTypeClick(2)">
            </view>
            <u-transition :show="showTotalTwo">
              <view class="transition_total">+{{addValue1}}</view>
            </u-transition>
            <view class="dot_con_value">总{{record.item3_total}}</view>
          </view>
          <view class="table_top_one">
            <view :class="selectTypeList.indexOf(3) !=-1 ? 'dot_con_threes':'dot_con_three'"
              @click="selectTypeClick(3)"></view>
            <u-transition :show="showTotalThree">
              <view class="transition_total">+{{addValue2}}</view>
            </u-transition>
            <view class="dot_con_value">总{{record.item4_total}}</view>
          </view>
        </view>
        <view class="table_bottom">
          <view class="table_bottom_one">
            <view :class="selectTypeList.indexOf(4) !=-1 ? 'dot_con_ones':'dot_con_one'" @click="selectTypeClick(4)">
            </view>
            <u-transition :show="showTotalFour">
              <view class="transition_total">+{{addValue3}}</view>
            </u-transition>
            <view class="dot_con_value">总{{record.item0_total}}</view>
          </view>
          <view class="table_bottom_one">
            <view :class="selectTypeList.indexOf(5) !=-1 ? 'dot_con_twos':'dot_con_two'" @click="selectTypeClick(5)">
            </view>
            <u-transition :show="showTotalFive">
              <view class="transition_total">+{{addValue4}}</view>
            </u-transition>
            <view class="dot_con_value">总{{record.item1_total}}</view>
          </view>
        </view>
        <view class="table_footer">
          <view :class="selectGoldList.indexOf(1) !=-1 ? 'table_footer_ones':'table_footer_one'"
            @click="selectGoldClick(1)"></view>
          <view :class="selectGoldList.indexOf(2) !=-1 ? 'table_footer_twos':'table_footer_two'"
            @click="selectGoldClick(2)"></view>
          <view :class="selectGoldList.indexOf(3) !=-1 ? 'table_footer_threes':'table_footer_three'"
            @click="selectGoldClick(3)"></view>
        </view>
        <view class="table_footer2">
          取消投注
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="gold"></view>
      <view class="goldvalue">
        {{balance}}
      </view>
      <view class="confirm" @click="footerClick()"></view>
    </view>
    <!-- 玩法说明 start -->
    <view class="shade_shadowl u-flex u-ali-center u-ju-center" @click.stop="isShadowl = false" v-if="isShadowl">
      <view class="shade_shadowl_box" v-html="desc">

      </view>
    </view>
    <!-- 玩法说明 end -->
  </view>
</template>

<script>
  import {
    getDiceConfig,
    getDiceStatus,
    setDiceBet
  } from '@/api/mine/game.js'
  export default {
    data() {
      return {
        isShadowl: false,
        kaijiang: true,
        statusBarHeight: 0,
        balance: '',
        desc: '',
        max: '',
        gifUrlList: ['../../../static/mine/game/1.gif',
          '../../../static/mine/game/2.gif',
          '../../../static/mine/game/3.gif',
          '../../../static/mine/game/4.gif',
          '../../../static/mine/game/5.gif',
          '../../../static/mine/game/6.gif'
        ],
        now_time: '',
        number: [],
        record: {},
        countdown1: '',
        imageList: [],
        countdown2: '',
        selectTypeList: [],
        selectedTypeList: [],
        selectGoldList: [],
        showTotalOne: false,
        showTotalTwo: false,
        showTotalThree: false,
        showTotalFour: false,
        showTotalFive: false,
        addValue0: 0,
        addValue: 0,
        addValue1: 0,
        addValue2: 0,
        addValue3: 0,
        addValue4: 0,
        numerList: [0, 0, 0, 0, 0],
        inning: '', // 游戏的id
      }
    },
    methods: {
      // 倒计时一结束触发
      timeup1() {
        console.log('倒计时一结束触发');
        this.getPageList()
      },
      timeup2() {
        console.log('倒计时二结束触发');
        if (this.inning) {
          this.kaijiang = false
          setTimeout(() => {
            getDiceStatus({
              inning: this.inning
            }).then(res => {
              this.imageList = res.data.record_result
              console.log('这是getDiceStatus的res.data==', this.imageList)
              setTimeout(() => {
                this.getPageList()
              }, 2000)
              setTimeout(() => {
                this.imageList = []
              }, 40000)
            }).catch((e) => {
              console.log('这是getDiceStatus的err==', e)
            });
          }, 2000)

        }

      },
      backClick() {
        console.log(21231);
        uni.navigateBack()
      },
      // 选5个类型
      selectTypeClick(number) {
        if (this.record.is_next == 1) {
          this.$ui.toast('本局还没开始')
          return;
        }
        if (this.selectGoldList.length) {
          if (this.selectTypeList.indexOf(number) == -1) {
            this.selectTypeList.push(number) //选中添加到数组里
          } else {
            // this.selectTypeList.splice(this.selectTypeList.indexOf(number), 1) //取消
          }
          if (this.record.item2_total + this.record.item3_total + this.record.item4_total + this.record.item0_total +
            this.record.item1_total > this.balance) {
            this.$ui.toast('余额不足')
            return;
          }
          console.log('选', this.selectTypeList);
          // 判断5个类型谁加谁显示动画
          this.selectedTypeList = []
          this.selectedTypeList.push(number)
          if (this.selectedTypeList.indexOf(1) !== -1) {
            this.addValue0 += this.addValue
            this.numerList[2] = this.addValue0
            console.log(111111111111)
            this.showTotalOne = true
          } else if (this.selectedTypeList.indexOf(2) !== -1) {
            console.log(222222222222)
            this.addValue1 += this.addValue
            this.numerList[3] = this.addValue1
            this.showTotalTwo = true

          } else if (this.selectedTypeList.indexOf(3) !== -1) {
            console.log(33333333333)
            this.addValue2 += this.addValue
            this.numerList[4] = this.addValue2
            this.showTotalThree = true

          } else if (this.selectedTypeList.indexOf(4) !== -1) {
            console.log(44444444444)
            // 选择的是大的时候
            this.addValue3 += this.addValue
            this.numerList[0] = this.addValue3
            this.showTotalFour = true

          } else if (this.selectedTypeList.indexOf(5) !== -1) {
            console.log(55555555555)
            // 选择小的时候
            this.addValue4 += this.addValue
            this.numerList[1] = this.addValue4
            this.showTotalFive = true

          } else {
            console.log('err')
          }
        } else {
          this.$ui.toast('请选择硬币')
        }
      },
      // 选3个硬币
      selectGoldClick(number) {
        // 首先先选5个类型
        // if(this.selectTypeList.length){
        // 判断this.addValue加多少
        if (number == 1) {
          this.addValue = 10
        } else if (number == 2) {
          this.addValue = 100
        } else if (number == 3) {
          this.addValue = 1000
        } else {
          console.log('err')
        }
        // console.log('this.addValue=', this.addValue)
        if (this.selectGoldList.indexOf(number) == -1) {
          this.selectGoldList = []
          this.selectGoldList.push(number); //选中添加到数组里
        } else {
          this.selectGoldList.splice(this.selectGoldList.indexOf(number), 1); //取消
        }
        console.log('选硬币', this.selectGoldList);
        // }else{
        // 	this.$ui.toast('请选择类型')
        // }
      },
      topClick() {
        console.log('这是顶部')
      },
      setClick() {
        console.log('这是设置')
      },
      playClick() {
        this.isShadowl = true;
        console.log('玩法说明')
      },
      historyClick() {
        this.$ui.push('/pages/mine/game/list')
        console.log('历史记录')
      },

      // 点击下注
      footerClick() {
        setDiceBet({
          inning: this.inning,
          number: this.numerList
        }).then(res => {
          if (res.code == 404) {
            this.$ui.toast(res.msg)
          } else if (res.code == 200) {
            this.showTotalFive = false;
            this.showTotalOne = false;
            this.showTotalTwo = false;
            this.showTotalThree = false;
            this.showTotalFour = false;
            this.record.item2_total = this.numerList[2]
            this.record.item3_total = this.numerList[3]
            this.record.item4_total = this.numerList[4]
            this.record.item0_total = this.numerList[0]
            this.record.item1_total = this.numerList[1]
            this.numerList.forEach(item => {
              this.balance -= item
            })
            this.numerList = [0, 0, 0, 0, 0]
            this.$ui.toast('下注成功')
          }
        })
        console.log('这是底部')
      },
      getPageList() {
        // 调用接口
        getDiceConfig({}).then(res => {
          console.log('这是getDiceConfig的res.data==', res.data)
          this.balance = res.data.balance
          this.desc = res.data.desc
          this.now_time = res.now_time
          this.number = res.data.number
          this.record = res.data.record
          this.kaijiang = true
          // 倒计时
          let timestamp = Date.parse(new Date())
          let starttamp = this.record.start_time * 1000
          if (this.record.next) {
            let nextTime = this.record.next.start_time * 1000
            this.countdown1 = nextTime - timestamp
            console.log(this.countdown1);
            console.log(nextTime, '下一句开始的时间');
            console.log(starttamp);
          }
          let endtime = this.record.end_time * 1000
          this.countdown2 = endtime - timestamp
          // 调用第二个接口的参数
          this.inning = res.data.record.record_id

        }).catch((e) => {
          console.log('这是getDiceConfig的err==', e)
        })
      }
    },
    onShow() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
      this.getPageList()
    }
  }
</script>

<style scoped lang="less">
  .shade_shadowl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;

    .shade_shadowl_box {
      width: 60%;
      border-radius: 20rpx;
      background-color: #fff;
      text-align: center;
    }
  }

  .content {
    width: 100%;
    height: 100vh;
    background-image: url('@/static/mine/game/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .back {
      position: fixed;
      left: 24rpx;
      width: 100rpx; //大小是153px
      height: 100rpx;
      background-image: url('@/static/mine/game/back.png');
      background-size: 100% 100%;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 10;
    }

    .top {
      position: fixed;
      width: calc(100vw - 0rpx); //大小是1368px
      height: 220rpx; //大小是411px *4 1644
      background-image: url('@/static/mine/game/top.png');
      background-size: 80% auto;
      background-position: center top;
      background-repeat: no-repeat;

      // border: 1px solid red;
      .top_cont_top1 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 30rpx;
        width: 350rpx;
        // border: 1px solid green;
        display: flex;
        justify-content: space-between;

        .left {
          height: 30rpx;
          // width: 200rpx;
          // border: 1px solid blue;
          line-height: 30rpx;
          color: #ffffff;
          font-size: 20rpx;
          font-family: PingFang SC;
          padding: 0 10rpx;
          transition: all 0.3s ease;
        }

        .right {
          height: 30rpx;
          // width: 200rpx;
          // border: 1px solid pink;
          line-height: 30rpx;
          color: #ffffff;
          font-size: 20rpx;
          font-family: PingFang SC;
          padding: 0 10rpx;
        }
      }

      .top_cont_top2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 40rpx;
        width: 320rpx;
        // border: 1px solid #E0AC5E;
        display: flex;
        justify-content: space-between;

        .left {
          border-radius: 20rpx;
          color: #FFD76B;
          background-color: rgba(0, 0, 0, 0.6);
          padding: 0 10rpx;
          height: 40rpx;
          // width: 200rpx;
          // border: 1px solid pink;
          line-height: 40rpx;
          color: #ffffff;
          font-size: 20rpx;
          font-family: PingFang SC;
        }

        .right {
          border-radius: 20rpx;
          color: #FFD76B;
          background-color: rgba(0, 0, 0, 0.6);
          padding: 0 10rpx;
          height: 40rpx;
          // width: 200rpx;
          // border: 1px solid pink;
          line-height: 40rpx;
          color: #ffffff;
          font-size: 20rpx;
          font-family: PingFang SC;
        }
      }
    }

    .set {
      position: fixed;
      right: 24rpx;
      width: 100rpx;
      height: 100rpx;
      background-image: url('@/static/mine/game/info.png');
      background-size: 100% 100%;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .table {
      width: 100%;
      height: 100%;
      background-image: url('@/static/mine/game/table.png');
      background-size: 110% auto;
      background-position: center center;
      background-repeat: no-repeat;
      position: relative;

      .table_sezi {
        width: 50%;
        height: 170rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 28%;
        z-index: 99;
      }

      .table_content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 42%;
        width: 76%;
        height: 400rpx;

        // background-color: red;
        .table_top {
          display: flex;
          justify-content: space-around;
          width: 100%;

          .table_top_one {
            width: 180rpx;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: rgba(0, 0, 0, 0.2);
            position: relative;

            .dot_con_one {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/111.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              border: 1rpx solid transparent;
            }

            .dot_con_ones {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/111.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              // border: 1rpx solid #ffffff;
            }

            .dot_con_two {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/333.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              border: 1rpx solid transparent;
            }

            .dot_con_twos {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/333.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              // border: 1rpx solid #ffffff;
            }

            .dot_con_three {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/666.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              border: 1rpx solid transparent;
            }

            .dot_con_threes {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/666.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              // border: 1rpx solid #ffffff;
            }

            .transition_total {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 200rpx;
              height: 20rpx;
              background-color: rgba(0, 0, 0, 0.8);
              border-radius: 20rpx;
              font-size: 20rpx;
              font-family: PingFang SC;
              color: #ffffff;
              text-align: center;
              line-height: 20rpx;
              padding: 10rpx;
            }

            .dot_con_value {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 20rpx;
              width: 120rpx;
              height: 40rpx;
              background-color: rgba(0, 0, 0, 0.6);
              border-radius: 20rpx;
              font-size: 20rpx;
              font-family: PingFang SC;
              color: #ffffff;
              text-align: center;
              line-height: 40rpx;
            }

          }
        }

        .table_bottom {
          width: 100%;
          height: 180rpx;
          margin-top: 10rpx;
          // background-color: red;
          display: flex;
          justify-content: space-around;

          .table_bottom_one {
            width: 48%;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: rgba(0, 0, 0, 0.2);
            position: relative;

            .dot_con_one {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/big.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              border: 1rpx solid transparent;
            }

            .dot_con_ones {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/big.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              // border: 1rpx solid #ffffff;
            }

            .dot_con_two {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/small.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              border: 1rpx solid transparent;
            }

            .dot_con_twos {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 30rpx;
              width: 72rpx; // /4 72
              height: 72rpx; // /4 72
              background-image: url('@/static/mine/game/small.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              // border: 1rpx solid #ffffff;
            }

            .transition_total {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 160rpx;
              height: 20rpx;
              background-color: rgba(0, 0, 0, 0.8);
              border-radius: 20rpx;
              font-size: 20rpx;
              font-family: PingFang SC;
              color: #ffffff;
              text-align: center;
              line-height: 20rpx;
              padding: 10rpx;
            }

            .dot_con_value {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 20rpx;
              width: 120rpx;
              height: 40rpx;
              background-color: rgba(0, 0, 0, 0.6);
              border-radius: 20rpx;
              font-size: 20rpx;
              font-family: PingFang SC;
              color: #ffffff;
              text-align: center;
              line-height: 40rpx;
            }
          }
        }

        .table_footer {
          margin: 0 auto;
          width: 80%;
          height: 120rpx;
          margin-top: 10rpx;
          // background-color: red;
          display: flex;
          justify-content: space-around;
          overflow: hidden;

          .table_footer_one {
            width: 100rpx;
            height: 100rpx;
            background-image: url('@/static/mine/game/10.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
            border: 1rpx solid transparent;
            opacity: 0.5;
          }

          .table_footer_ones {
            width: 100rpx;
            height: 100rpx;
            background-image: url('@/static/mine/game/10.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .table_footer_two {
            width: 100rpx;
            height: 100rpx;
            background-image: url('@/static/mine/game/100.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
            border: 1rpx solid transparent;
            opacity: 0.5;
          }

          .table_footer_twos {
            width: 100rpx;
            height: 100rpx;
            background-image: url('@/static/mine/game/100.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }

          .table_footer_three {
            width: 100rpx;
            height: 100rpx;
            background-image: url('@/static/mine/game/1000.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
            border: 1rpx solid transparent;
            opacity: 0.5;
          }

          .table_footer_threes {
            width: 100rpx;
            height: 100rpx;
            background-image: url('@/static/mine/game/1000.png');
            background-size: 100% 100%;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }

        .table_footer2 {
          margin: 0 auto;
          width: 131rpx;
          height: 45rpx;
          border-radius: 23rpx;
          text-align: center;
          line-height: 45rpx;
          border: 1rpx solid white;
          background-color: green;
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }

    .play {
      position: fixed;
      left: 0;
      top: 80%;
      height: 50rpx;
      width: 120rpx;
      border-radius: 0 30rpx 30rpx 0;
      background-color: black;
      border: 1rpx solid #E0AC5E;
      text-align: center;
      line-height: 50rpx;
      color: #E0AC5E;
      font-size: 22rpx;
      font-family: PingFang SC;
      z-index: 9;
    }

    .history {
      position: fixed;
      right: 0;
      top: 80%;
      height: 50rpx;
      width: 120rpx;
      border-radius: 30rpx 0 0 30rpx;
      background-color: black;
      border: 1rpx solid #E0AC5E;
      text-align: center;
      line-height: 50rpx;
      color: #E0AC5E;
      font-size: 22rpx;
      font-family: PingFang SC;
      z-index: 9;
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: calc(100vw - 0rpx); //大小是1216px *4 4864
      height: 276rpx; //大小是276px *4 1104
      background-image: url('@/static/mine/game/footer.png');
      background-size: 120% auto;
      // background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      overflow: hidden;

      .gold {
        position: absolute;
        left: 140rpx;
        bottom: 30rpx;
        width: 90rpx;
        height: 77rpx;
        background-image: url('@/static/mine/game/gold.png');
        background-size: 100% auto;
        background-position: center center;
        background-repeat: no-repeat;
      }

      .goldvalue {
        position: absolute;
        left: 220rpx;
        bottom: 50rpx;
        font-size: 50rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        // height: 28rpx;
        text-align: center;
        // line-height: 28rpx
      }

      .confirm {
        position: absolute;
        right: 140rpx;
        bottom: 30rpx;
        width: 225rpx;
        height: 97rpx;
        background-image: url('@/static/mine/game/confirm.png');
        background-size: 100% auto;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
  }

  .dice1,
  .dice2,
  .dice3,
  .dice4,
  .dice5,
  .dice6 {
    top: 0%;
    left: 0%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-out;
  }

  .dice1 {
    background: url(../../../static/mine/game/1.png) no-repeat center;
    background-size: 100% auto;
  }

  .dice2 {
    background: url(../../../static/mine/game/2.png) no-repeat center;
    background-size: 100% auto;
  }

  .dice3 {
    background: url(../../../static/mine/game/3.png) no-repeat center;
    background-size: 100% auto;
  }

  .dice4 {
    background: url(../../../static/mine/game/4.png) no-repeat center;
    background-size: 100% auto;
  }

  .dice5 {
    background: url(../../../static/mine/game/5.png) no-repeat center;
    background-size: 100% auto;
  }

  .dice6 {
    background: url(../../../static/mine/game/6.png) no-repeat center;
    background-size: 100% auto;
  }

.game-dice-dian .show0 {
    -webkit-animation-name: dice1;
  }
  .game-dice-dian .show1 {
    -webkit-animation-name: dice3;
  }

  .game-dice-dian .show2 {
    -webkit-animation-name: dice5;
  }

  .game-dice-dian .show3 {
    -webkit-animation-name: dice6;
  }

  .game-dice-dian .show4 {
    -webkit-animation-name: dice4;
  }

  .game-dice-dian .show5 {
    -webkit-animation-name: dice5;
  }

  .game-dice-dian .show6 {
    -webkit-animation-name: dice6;
  }

  @-webkit-keyframes dice1 {
    0% {
      top: 0%;
      left: 0%;
    }

    5% {
      top: 2%;
      left: 3%;
      -webkit-transform: rotate(180deg);
    }

    10% {
      top: 5%;
      left: 5%;
      -webkit-transform: rotate(360deg);
    }

    15% {
      top: 7.000000000000001%;
      left: 7.000000000000001%;
      -webkit-transform: rotate(540deg);
    }

    20% {
      top: 9%;
      left: 9%;
      -webkit-transform: rotate(720deg);
    }

    25% {
      top: 12%;
      left: 11%;
      -webkit-transform: rotate(900deg);
    }

    30% {
      top: 14.000000000000002%;
      left: 13%;
      -webkit-transform: rotate(1080deg);
    }

    35% {
      top: 16%;
      left: 15%;
      -webkit-transform: rotate(1260deg);
    }

    40% {
      top: 18%;
      left: 18%;
      -webkit-transform: rotate(1440deg);
    }

    45% {
      top: 21%;
      left: 20%;
      -webkit-transform: rotate(1620deg);
    }

    50% {
      top: 23%;
      left: 21%;
      -webkit-transform: rotate(1800deg);
    }

    55% {
      top: 26%;
      left: 20%;
      -webkit-transform: rotate(1980deg);
    }

    60% {
      top: 28.999999999999996%;
      left: 17%;
      -webkit-transform: rotate(2160deg);
    }

    65% {
      top: 31%;
      left: 14.000000000000002%;
      -webkit-transform: rotate(2340deg);
    }

    70% {
      top: 34%;
      left: 14.000000000000002%;
      -webkit-transform: rotate(2520deg);
    }

    75% {
      top: 36%;
      left: 15%;
      -webkit-transform: rotate(2700deg);
    }

    80% {
      top: 37%;
      left: 18%;
      -webkit-transform: rotate(2880deg);
    }

    85% {
      top: 38%;
      left: 19%;
      -webkit-transform: rotate(3060deg);
    }

    90% {
      top: 38%;
      left: 22%;
      -webkit-transform: rotate(3240deg);
    }

    95% {
      top: 36%;
      left: 24%;
      -webkit-transform: rotate(3420deg);
    }

    100% {
      top: 34%;
      left: 25%;
      -webkit-transform: rotate(3600deg);
    }
  }

  @-webkit-keyframes dice2 {
    0% {
      top: 0%;
      left: 0%;
    }

    5% {
      top: 3%;
      left: 1%;
      -webkit-transform: rotate(180deg);
    }

    10% {
      top: 4%;
      left: 4%;
      -webkit-transform: rotate(360deg);
    }

    15% {
      top: 6%;
      left: 7.000000000000001%;
      -webkit-transform: rotate(540deg);
    }

    20% {
      top: 7.000000000000001%;
      left: 10%;
      -webkit-transform: rotate(720deg);
    }

    25% {
      top: 9%;
      left: 13%;
      -webkit-transform: rotate(900deg);
    }

    30% {
      top: 11%;
      left: 17%;
      -webkit-transform: rotate(1080deg);
    }

    35% {
      top: 14.000000000000002%;
      left: 21%;
      -webkit-transform: rotate(1260deg);
    }

    40% {
      top: 15%;
      left: 24%;
      -webkit-transform: rotate(1440deg);
    }

    45% {
      top: 15%;
      left: 27%;
      -webkit-transform: rotate(1620deg);
    }

    50% {
      top: 16%;
      left: 30%;
      -webkit-transform: rotate(1800deg);
    }

    55% {
      top: 16%;
      left: 33%;
      -webkit-transform: rotate(1980deg);
    }

    60% {
      top: 16%;
      left: 36%;
      -webkit-transform: rotate(2160deg);
    }

    65% {
      top: 17%;
      left: 40%;
      -webkit-transform: rotate(2340deg);
    }

    70% {
      top: 19%;
      left: 42%;
      -webkit-transform: rotate(2520deg);
    }

    75% {
      top: 20%;
      left: 44%;
      -webkit-transform: rotate(2700deg);
    }

    80% {
      top: 24%;
      left: 45%;
      -webkit-transform: rotate(2880deg);
    }

    85% {
      top: 27%;
      left: 46%;
      -webkit-transform: rotate(3060deg);
    }

    90% {
      top: 30%;
      left: 46%;
      -webkit-transform: rotate(3240deg);
    }

    95% {
      top: 33%;
      left: 46%;
      -webkit-transform: rotate(3420deg);
    }

    100% {
      top: 36%;
      left: 48%;
      -webkit-transform: rotate(3600deg);
    }
  }

  @-webkit-keyframes dice3 {
    0% {
      top: 0%;
      left: 0%;
    }

    5% {
      top: 4%;
      left: 5%;
      -webkit-transform: rotate(180deg);
    }

    10% {
      top: 6%;
      left: 10%;
      -webkit-transform: rotate(360deg);
    }

    15% {
      top: 8%;
      left: 14.000000000000002%;
      -webkit-transform: rotate(540deg);
    }

    20% {
      top: 9%;
      left: 19%;
      -webkit-transform: rotate(720deg);
    }

    25% {
      top: 10%;
      left: 23%;
      -webkit-transform: rotate(900deg);
    }

    30% {
      top: 10%;
      left: 27%;
      -webkit-transform: rotate(1080deg);
    }

    35% {
      top: 11%;
      left: 32%;
      -webkit-transform: rotate(1260deg);
    }

    40% {
      top: 12%;
      left: 38%;
      -webkit-transform: rotate(1440deg);
    }

    45% {
      top: 14.000000000000002%;
      left: 43%;
      -webkit-transform: rotate(1620deg);
    }

    50% {
      top: 15%;
      left: 47%;
      -webkit-transform: rotate(1800deg);
    }

    55% {
      top: 17%;
      left: 51%;
      -webkit-transform: rotate(1980deg);
    }

    60% {
      top: 18%;
      left: 56.00000000000001%;
      -webkit-transform: rotate(2160deg);
    }

    65% {
      top: 19%;
      left: 61%;
      -webkit-transform: rotate(2340deg);
    }

    70% {
      top: 21%;
      left: 66%;
      -webkit-transform: rotate(2520deg);
    }

    75% {
      top: 21%;
      left: 69%;
      -webkit-transform: rotate(2700deg);
    }

    80% {
      top: 23%;
      left: 73%;
      -webkit-transform: rotate(2880deg);
    }

    85% {
      top: 26%;
      left: 76%;
      -webkit-transform: rotate(3060deg);
    }

    90% {
      top: 30%;
      left: 79%;
      -webkit-transform: rotate(3240deg);
    }

    95% {
      top: 36%;
      left: 79%;
      -webkit-transform: rotate(3420deg);
    }

    100% {
      top: 36%;
      left: 76%;
      -webkit-transform: rotate(3600deg);
    }
  }

  @-webkit-keyframes dice4 {
    0% {
      top: 0%;
      left: 0%;
    }

    5% {
      top: 2%;
      left: 2%;
      -webkit-transform: rotate(180deg);
    }

    10% {
      top: 6%;
      left: 4%;
      -webkit-transform: rotate(360deg);
    }

    15% {
      top: 10%;
      left: 6%;
      -webkit-transform: rotate(540deg);
    }

    20% {
      top: 16%;
      left: 7.000000000000001%;
      -webkit-transform: rotate(720deg);
    }

    25% {
      top: 22%;
      left: 8%;
      -webkit-transform: rotate(900deg);
    }

    30% {
      top: 28.000000000000004%;
      left: 9%;
      -webkit-transform: rotate(1080deg);
    }

    35% {
      top: 35%;
      left: 10%;
      -webkit-transform: rotate(1260deg);
    }

    40% {
      top: 43%;
      left: 11%;
      -webkit-transform: rotate(1440deg);
    }

    45% {
      top: 48%;
      left: 12%;
      -webkit-transform: rotate(1620deg);
    }

    50% {
      top: 52%;
      left: 12%;
      -webkit-transform: rotate(1800deg);
    }

    55% {
      top: 56.99999999999999%;
      left: 12%;
      -webkit-transform: rotate(1980deg);
    }

    60% {
      top: 64%;
      left: 12%;
      -webkit-transform: rotate(2160deg);
    }

    65% {
      top: 70%;
      left: 13%;
      -webkit-transform: rotate(2340deg);
    }

    70% {
      top: 74%;
      left: 14.000000000000002%;
      -webkit-transform: rotate(2520deg);
    }

    75% {
      top: 76%;
      left: 16%;
      -webkit-transform: rotate(2700deg);
    }

    80% {
      top: 75%;
      left: 19%;
      -webkit-transform: rotate(2880deg);
    }

    85% {
      top: 74%;
      left: 21%;
      -webkit-transform: rotate(3060deg);
    }

    90% {
      top: 72%;
      left: 23%;
      -webkit-transform: rotate(3240deg);
    }

    95% {
      top: 72%;
      left: 26%;
      -webkit-transform: rotate(3420deg);
    }

    100% {
      top: 77%;
      left: 24%;
      -webkit-transform: rotate(3600deg);
    }
  }

  @-webkit-keyframes dice5 {
    0% {
      top: 0%;
      left: 0%;
    }

    5% {
      top: 3%;
      left: 3%;
      -webkit-transform: rotate(180deg);
    }

    10% {
      top: 6%;
      left: 7.000000000000001%;
      -webkit-transform: rotate(360deg);
    }

    15% {
      top: 8%;
      left: 10%;
      -webkit-transform: rotate(540deg);
    }

    20% {
      top: 11%;
      left: 13%;
      -webkit-transform: rotate(720deg);
    }

    25% {
      top: 15%;
      left: 17%;
      -webkit-transform: rotate(900deg);
    }

    30% {
      top: 18%;
      left: 21%;
      -webkit-transform: rotate(1080deg);
    }

    35% {
      top: 21%;
      left: 25%;
      -webkit-transform: rotate(1260deg);
    }

    40% {
      top: 25%;
      left: 28.999999999999996%;
      -webkit-transform: rotate(1440deg);
    }

    45% {
      top: 28.999999999999996%;
      left: 32%;
      -webkit-transform: rotate(1620deg);
    }

    50% {
      top: 33%;
      left: 36%;
      -webkit-transform: rotate(1800deg);
    }

    55% {
      top: 36%;
      left: 39%;
      -webkit-transform: rotate(1980deg);
    }

    60% {
      top: 41%;
      left: 42%;
      -webkit-transform: rotate(2160deg);
    }

    65% {
      top: 46%;
      left: 45%;
      -webkit-transform: rotate(2340deg);
    }

    70% {
      top: 50%;
      left: 48%;
      -webkit-transform: rotate(2520deg);
    }

    75% {
      top: 54%;
      left: 51%;
      -webkit-transform: rotate(2700deg);
    }

    80% {
      top: 59%;
      left: 53%;
      -webkit-transform: rotate(2880deg);
    }

    85% {
      top: 64%;
      left: 55.00000000000001%;
      -webkit-transform: rotate(3060deg);
    }

    90% {
      top: 69%;
      left: 55.00000000000001%;
      -webkit-transform: rotate(3240deg);
    }

    95% {
      top: 73%;
      left: 54%;
      -webkit-transform: rotate(3420deg);
    }

    100% {
      top: 77%;
      left: 51%;
      -webkit-transform: rotate(3600deg);
    }
  }

  @-webkit-keyframes dice6 {
    0% {
      top: 0%;
      left: 0%;
    }

    5% {
      top: 11%;
      left: 9%;
      -webkit-transform: rotate(180deg);
    }

    10% {
      top: 15%;
      left: 16%;
      -webkit-transform: rotate(360deg);
    }

    15% {
      top: 21%;
      left: 23%;
      -webkit-transform: rotate(540deg);
    }

    20% {
      top: 26%;
      left: 28.999999999999996%;
      -webkit-transform: rotate(720deg);
    }

    25% {
      top: 31%;
      left: 36%;
      -webkit-transform: rotate(900deg);
    }

    30% {
      top: 35%;
      left: 41%;
      -webkit-transform: rotate(1080deg);
    }

    35% {
      top: 39%;
      left: 46%;
      -webkit-transform: rotate(1260deg);
    }

    40% {
      top: 43%;
      left: 52%;
      -webkit-transform: rotate(1440deg);
    }

    45% {
      top: 45%;
      left: 55.00000000000001%;
      -webkit-transform: rotate(1620deg);
    }

    50% {
      top: 47%;
      left: 57.99999999999999%;
      -webkit-transform: rotate(1800deg);
    }

    55% {
      top: 50%;
      left: 63%;
      -webkit-transform: rotate(1980deg);
    }

    60% {
      top: 53%;
      left: 67%;
      -webkit-transform: rotate(2160deg);
    }

    65% {
      top: 56.00000000000001%;
      left: 71%;
      -webkit-transform: rotate(2340deg);
    }

    70% {
      top: 59%;
      left: 74%;
      -webkit-transform: rotate(2520deg);
    }

    75% {
      top: 63%;
      left: 78%;
      -webkit-transform: rotate(2700deg);
    }

    80% {
      top: 67%;
      left: 78%;
      -webkit-transform: rotate(2880deg);
    }

    85% {
      top: 70%;
      left: 76%;
      -webkit-transform: rotate(3060deg);
    }

    90% {
      top: 72%;
      left: 73%;
      -webkit-transform: rotate(3240deg);
    }

    95% {
      top: 74%;
      left: 70%;
      -webkit-transform: rotate(3420deg);
    }

    100% {
      top: 73%;
      left: 76%;
      -webkit-transform: rotate(3600deg);
    }
  }
</style>
